<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>卡拉OK</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <link rel="stylesheet" type="text/css" href="./css/data-flex.min.css">
    <style type="text/css">
        html,
        body {
            background: rgba(255, 255, 255, 1);
        }

        .video {
            position: relative;
            height: 218px;
        }

        .play {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 50px;
            height: 50px;
        }

        video {
            display: block;
            width: 100%;
            height: 218px;
        }

        .footer {
            z-index: 999;
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 60px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
        }

        .footer img {
            width: 30px;
            height: 30px;
            margin: 0 15px;
        }

        .footer .time {
            min-width: fit-content;
            max-width: fit-content;
            color: #fff;
            font-size: 12px;
            margin-left: 13px;
        }

        .footer .full {
            width: 40px;
            height: 40px;
            margin: 0 8px;
        }

        .progress-box {
            position: relative;
            height: 4px;
            background: rgba(0, 0, 0, 0.48);
            border-radius: 2px;
            overflow: initial;
        }

        .progress {
            background-color: #fff;
            border-radius: 2px;
            width: 0%;
            height: 4px;
        }

        .point {
            position: absolute;
            top: 2px;
            left: 0%;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.35);
            box-sizing: content-box;
            transform: translate(-50%, -50%);
        }

        .point::before {
            content: ' ';
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #fff;
        }

        .fixed-bottom {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 50px;
            box-sizing: content-box;
        }

        .fixed-bottom-left {
            position: relative;
            height: 50px;
            background: rgba(255, 255, 255, 1);
        }

        .fixed-bottom-left::before {
            content: ' ';
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 1px;
            background-color: #d4d4d4;
            transform: scaleY(0.5);
        }


        .fixed-bottom-left-text {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .fixed-bottom-right {
            min-width: 50%;
            height: 50px;
            background: rgba(90, 194, 255, 1);
        }

        .fixed-bottom-right-text {
            font-size: 15px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }

        .fixed-bottom-left .fixed-bottom-img {
            box-shadow: 0px 3px 8px 0px rgba(253, 155, 67, 0.7);
            border-radius: 50%;
            width: 24px;
            height: 24px;
            margin-right: 8px;
        }

        .fixed-bottom-img {
            width: 40px;
            height: 40px;
        }

        .tab {
            z-index: 2;
            position: relative;
            height: 58px;
            padding-top: 8px;
            margin-top: -8px;
            background: rgba(255, 255, 255, 1);
            border-radius: 8px 8px 0px 0px;
            border-bottom: 1px solid rgba(212, 212, 212, 1);
        }

        .tab .item {
            position: relative;
            min-width: 50%;
            height: 50px;
        }

        .tab .item::after {
            display: none;
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 40px;
            height: 4px;
            background: rgba(90, 194, 255, 1);
            border-radius: 2px;
        }

        .tab .item .txt {
            font-size: 15px;
            font-weight: 600;
            color: rgba(25, 25, 25, 1);
        }

        .tab .active .txt {
            color: rgba(90, 194, 255, 1);
        }

        .tab .active::after {
            display: block;
        }

        .tab .item img {
            width: 17px;
            height: 17px;
            margin-left: 4px;
        }

        .my {
            box-sizing: content-box;
            height: calc(100vh - 318px);
            overflow-y: auto;
            padding: 0 15px;
        }

        .my .item {
            height: 58px;
        }

        .my .item .name {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .my .btns {
            width: 100px;
            min-width: 100px;
            margin-left: 15px;
        }

        .my .btns img {
            width: 24px;
            height: 24px;
        }

        .all {
            box-sizing: content-box;
            height: calc(100vh - 318px);
            overflow-y: auto;
            padding: 0 15px;
        }

        .all .item {
            height: 58px;
        }

        .all .item .name {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .all .btns {
            width: 100px;
            min-width: 24px;
        }

        .all .btns img {
            width: 24px;
            height: 24px;
        }

        .student-name {
            font-size: 12px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
        }

        .marsk {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 50px;
            background-color: rgba(0, 0, 0, 0);
            z-index: 2;
        }

        .record-box {
            position: fixed;
            top: 268px;
            left: 0;
            right: 0;
            bottom: 50px;
            background-color: #fff;
            z-index: 3;
        }

        .record-box img {
            display: block;
            margin: 0 auto 10px;
            width: 90px;
            height: 90px;
        }

        .record-box p {
            font-size: 14px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            text-align: center;
        }

        .tips {
            margin-top: 50px;
            text-align: center;
        }

        .tips img {
            display: block;
            width: 150px;
            height: 150px;
            margin: 0 auto;
        }

        .tips span {
            font-size:12px;
            font-weight:400;
            color:rgba(128,128,128,1);
            line-height:17px;
        }

        .row {
            margin: 15px;
        }

        .line {
            margin: 15px;
            height: 1px;
            background: rgb(214, 214, 214);
            transform: scaleY(0.5);
        }

        .key {
            font-size: 15px;
            font-weight: bold;
            color: rgba(25, 25, 25, 1);
        }

        .description {
            margin-top: 10px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            line-height: 22px;
        }

        .download {
            position: fixed;
            left: 15px;
            bottom: 30px;
            right: 15px;
            height: 40px;
            background: rgba(90, 194, 255, 1);
            font-size: 14px;
            font-weight: 500;
            border-radius: 25px;
            color: rgba(255, 255, 255, 1);
            box-shadow: 0px 5px 7px 0px rgba(11, 126, 193, 0.53);
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="video">
            <video id="video" @click="isShow = !isShow" preload="meta" x5-playsinline="" playsinline=""
                webkit-playsinline="" :src="videoURL" :poster="videoPoster ? videoPoster : videoURL + '?x-oss-process=video/snapshot,t_10000,m_fast'">
                <source :src="videoURL" type="video/mp4" />
                <source :src="videoURL" type="video/ogg" />
                <source :src="videoURL" type="video/webm" />
            </video>
            <img class="play" @click="isPlay = true" v-show="!isPlay"
                src="./img/play.png" alt="">
            <div class="footer" v-show="isShow" data-flex="box:justify cross:center">
                <img @click="isPlay = !isPlay" :src="isPlay ? './img/pause.png' : './img/play_4.png'"
                    alt="">
                <div class="progress-box" data-flex-box="1">
                    <div :style="'width:'+ (currentTime/videoDuration*100) +'%'" class="progress"></div>
                    <div :style="'left:'+ (currentTime/videoDuration*100) +'%'" class="point" id="point"></div>
                </div>
                <div class="time">{{ _current }}/{{ duration }}</div>
                <!-- <img class="full" src="../../image/ui/full.png" alt="" @click="toHorizontal"> -->
            </div>
        </div>
        <div class="line"></div>
        <div class="row">
            <div class="head" data-flex="main:justify">
                <div class="key">视频介绍</div>
            </div>
        </div>
        <div class="row">
            <div class="description">等待客户提供文案</div>
        </div>
        <div class="download" data-flex="main:center cross:center" @click="downloadApp()">
            下载朗文英语世界
        </div>
        <!-- <div class="tab" data-flex>
            <div class="item" :class="{active: current === 0 }" @click="clickTab(0)" data-flex-box="1"
                data-flex="main:center cross:center">
                <div class="txt">我的卡拉OK</div>
            </div>
            <div class="item" :class="{active: current === 1 }" @click="clickTab(1)" data-flex-box="1"
                data-flex="main:center cross:center">
                <div class="txt">来自班级的分享</div>
                <img v-if="userType == 2" src="../../image/course/arrow.png" @click="clickSelectClass()" alt="">
            </div>
        </div>
        <div class="my" v-show="current === 0">
            <div v-for="item,index in myKarokeGroup" class="item" data-flex="cross:center">
                <div class="name" data-flex-box="1">{{ item.dubName }}</div>
                <div class="btns" data-flex="main:justify">
                    <img :src="current +''+ index === currentPlay && isPlay ? '../../image/ui/pause_4.png' : '../../image/ui/play_8.png'"
                        @click="clickPlay(index)" alt="">
                    <img src="../../image/course/share.png" @click="clickShare(item)" alt="">
                    <img src="../../image/course/delete.png" @click="clickDelete(index)" alt="">
                </div>
            </div>
            <div class="tips" v-show="myNull">
                <img src="../../image/ui/my_null.png" alt="">
                <span>您还没有录音,快来唱唱看吧!</span>
            </div>
        </div>
        <div class="all" v-show="current === 1">
            <div v-for="item,index in classShareGroup" class="item" data-flex="cross:center">
                <div data-flex-box="1">
                    <div class="name">{{ item.dubName }}</div>
                    <div class="student-name">来自: {{ item.nickName }}</div>
                </div>
                <div class="btns" data-flex="main:right">
                    <img :src="current +''+ index === currentPlay && isPlay ? '../../image/ui/pause_4.png' : '../../image/ui/play_8.png'"
                        @click="clickPlay(index)" alt="">
                </div>
            </div>
            <div class="tips" v-show="shareNull">
                <img src="../../image/ui/share_null.png" alt="">
                <span>暂无分享呢~</span>
            </div>
        </div>
        <div v-if="isRecord">
            <div class="marsk" :style="'bottom:'+footerH+'px'"></div>
            <div class="record-box" data-flex="main:center cross:center" :style="'bottom:'+footerH+'px'">
                <div @click="handleRecord()">
                    <img src="../../image/course/sent_record.gif" alt="">
                    <p>正在录制，点击停止录制…</p>
                </div>
            </div>
        </div>
        <footer id="footer" class="fixed-bottom" data-flex>
            <div class="fixed-bottom-left" data-flex-box="1" data-flex="main:center cross:center"
                @click="clickPlayOriginal">
                <img class="fixed-bottom-img"
                    :src="playOriginal && isPlay? '../../image/ui/pause_5.png' : '../../image/ui/play_2.png'" alt="">
                <div class="fixed-bottom-left-text">播放原音</div>
            </div>
            <div @click="handleRecord()" class="fixed-bottom-right" data-flex-box="1"
                data-flex="main:center cross:center">
                <img class="fixed-bottom-img" src="../../image/course/sing.png" alt="">
                <div class="fixed-bottom-right-text">我也要唱</div>
            </div>
        </footer> -->
    </div>
</body>
<!-- <script type="text/javascript" src="../../script/api.js"></script> -->
<script type="text/javascript" src="./js/service-tool.js"></script>
<script type="text/javascript" src="./js/service-app.js"></script>
<script type="text/javascript" src="./js/service-user.js"></script>
<script type="text/javascript" src="./js/service-logic.js"></script>
<!-- <script type="text/javascript" src="./js/service-pic.js"></script> -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/vue.min.js"></script>
<!-- <script type="text/javascript" src="./js/saveFiles.js"></script>
<script type="text/javascript" src="./js/audio.js"></script> -->
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    // var USER, $S, vm;
    // var pageParam = {}, delIndex = -1, video;
    // apiready = function () {
    //     $S = SERVICE();
    //     USER = USER();
    //     console.log(JSON.stringify(api.pageParam) + '=====pageParam');
    //     pageParam = api.pageParam;

    //     fnInit();
    //     Audio.init([{'src': pageParam.videoBgm}], false);
    //     fnInitAliYunOss();
    // };
    fnInit();
    
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                // // 我的卡拉OK是否为空
                // myNull: false,
                // // 班级分享是否为空
                // shareNull: false,
                // // 用户类型 1 学生 2老师
                // userType: getUserType(),
                // // 当前选中的tab
                // current: 0,
                // // 当前播放的项
                // currentPlay: '',
                // 视频地址
                videoURL: getQuery('url'),
                // 视频封面
                videoPoster: '',
                // 是否播放,默认为否
                isPlay: false,
                // 是否显示控制台, 默认为否
                isShow: false,
                // 视频总时长
                videoDuration: 0,
                // 视频当前播放进度
                currentTime: 0,
                // myKarokeGroup: [],
                // classShareGroup: [],
                // playOriginal: true,
                // classId: USER.Get('classId'),
                // isRecord: false,
                footerH: 50,
                // dataName: pageParam.questionName
            },
            methods: {
                // clickTab: function (newVal) {
                //     if (newVal == 1) {
                //         if (this.userType == 2 && !this.classId) {
                //             fnToast('请先选择班级');
                //             clickSelectClass();
                //         } else if (this.userType == 1 && !this.classId) {
                //             fnToast('您还未加入班级');
                //         }else {
                //             this.current = newVal;
                //         }
                //     }else {
                //         this.current = newVal;
                //     }
                // },
                // clickPlay: function (index) {
                //     var currentPlay = this.current +''+ index;
                //     if(this.currentPlay != currentPlay) {
                //         this.currentPlay = currentPlay;
                //         var item = this.current === 1 ? this.classShareGroup[index] : this.myKarokeGroup[index];
                //         this.videoURL = item.dubAudioUrl;
                //         vm.isPlay = true;
                //     } else {
                //         this.isPlay = false;
                //     }
                //     this.playOriginal = false;
                // },
                // clickPlayOriginal: function () {
                //     if (vm.isRecord) {
                //         fnToast('录音中，不能播放');
                //         return;
                //     }
                //     this.currentPlay = '';
                //     this.playOriginal = !this.playOriginal;
                //     if (this.playOriginal) {
                //         vm.videoURL = pageParam.video;
                //         vm.isPlay = true;
                //     }else {
                //         vm.isPlay = false;
                //     }
                // }
            },
            computed: {
                _current: function () {
                    time = parseInt(this.currentTime);
                    var s = time % 60,
                        m = (time - s) / 60;
                    return (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
                },
                duration: function () {
                    time = parseInt(this.videoDuration);
                    var s = time % 60,
                        m = (time - s) / 60;
                    return (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
                }
            },
            watch: {
                isPlay: function() {
                    if(this.isPlay) {
                        video.play();
                    } else {
                        video.pause();
                    }
                },
                // videoURL: function() {
                //     setTimeout(function() {
                //         vm.isPlay = true;
                //         video.play();
                //         videoLinstener();
                //     }, 100)
                // }
            }
        });
        videoLinstener();
        // vm.footerH = AD('footer').offsetH();
        // getMyKarokeGroup();
        // if (vm.userType == 1 && vm.classId) {
        //     getClassShareGroup();
        // }
    }

    // 监听视频事件
    function videoLinstener() {
        video = document.getElementById('video');
        video.addEventListener('durationchange', function () {
            vm.videoDuration = this.duration;
        })
        video.addEventListener('timeupdate', function () {
            vm.currentTime = this.currentTime;
        });
        video.addEventListener("ended", function () {
            vm.isPlay = false;
        });
    }

    // 切换横屏
    // function toHorizontal() {
    //     fnOpenWin({
    //         name: 'video_horizontal',
    //         url: '../video/video_horizontal.html',
    //         pageParam: {
    //             currentTime: vm.currentTime,
    //             video: {
    //                 videoUrl: vm.videoURL
    //             },
    //             isPlay: vm.isPlay,
    //             winName: api.winName,
    //             frmName: api.frameName
    //         },
    //         slidBackEnabled: false
    //     });
    //     api.setScreenOrientation({
    //         orientation: 'landscape_left'
    //     });
    //     // 不加该代码视频会有BUG
    //     vm.isPlay = false;
    // }

    // // 继续播放
    // function resumePlay(time, isPlay) {
    //     video.currentTime = time;
    //     vm.isPlay = isPlay;
    // }

    // // 我也要唱
    // function handleRecord() {
    //     vm.isPlay = false;
    //     vm.isRecord = !vm.isRecord;
    //     if(vm.isRecord) {
    //         fnOpenAlert({
    //             alertType: '22',
    //             alertConfirmFn: 'fnConfirmRecordCallback()'
    //         });
    //     }else {
    //         fnConfirmRecordCallback();
    //     }
    // }

    // function fnConfirmRecordCallback() {
        
    //     if (vm.isRecord) {
    //         // 开始录音
    //         createFile(new Date().getTime());
    //         if(pageParam.videoBgm)
    //         Audio.play();
    //     } else {
    //         // 停止录音
    //         stopRecord(recordCallback);
    //         Audio.pause();
    //     }
    // }

    // 保存录音
    // function fnSaveRecord(path) {
    //     api.showProgress({
    //         text: '录音上传中...',
    //         modal: true
    //     });
    //     var callback = function (url) {
    //         api.hideProgress();
    //         uploadRecordData(url);
    //     };
    //     fnUploadObsFile(path, callback);
    // }

    // 录音结束回调
    // function recordCallback(path) {
    //     fnOpenAlert({
    //         alertType: '21',
    //         alertConfirmFn: 'fnSaveRecord("'+ path +'")'
    //     });
    // }

    // 点击选择班级
    // function clickSelectClass() {
    //     fnOpenPublicWin('选择班级', 'class/select_class', { 'from': 'karaoke' });
    // }
    // 选择完班级
    // function setSelectedClass(ids) {
    //     vm.current = 1;
    //     vm.classId = ids;
    //     getClassShareGroup(ids);
    // }
    // 点击分享
    // function clickShare(item) {
    //     if(vm.userType == 1) {
    //         // 学生
    //         if(!vm.classId) {
    //             fnToast('您还未加入班级');
    //             return;
    //         }else {
    //             var url = 'question/shareDub';
    //             var params = {
    //                 'clsClassesId': vm.classId,
    //                 'id': item.id
    //             };
    //             var callback = function (data) {
    //                 fnToast('分享成功');
    //                 getClassShareGroup(vm.classId);
    //             };
    //             POST(url, params, callback);
    //         }
    //     }else {
    //         fnOpenFrame({
    //             name: 'share_frm',
    //             url: '../share.html',
    //             pageParam: {
    //                 businessId: item.id,
    //                 from: 'karaoke',
    //                 buss: 'share'
    //             }
    //         });
    //         // 老师
    //         // fnOpenPublicWin('选择班级','class/select_class', {
    //         //     businessId: item.id,
    //         //     from: 'karaoke',
    //         //     buss: 'share'
    //         // });
    //     }
    // }
    // 点击删除
    // function clickDelete(index) {
    //     delIndex = index;
    //     fnOpenAlert({
    //         alertType: 5,
    //         alertConfirmFn: 'confirmDelate'
    //     })
    // }

    // 获取我的卡拉OK数据
    // function getMyKarokeGroup() {
    //     var url = 'question/findDubDetailList';
    //     var params = {
    //         id: pageParam.id
    //     };
    //     var callback = function (data) {
    //         var listData = data.listData;
    //         vm.myKarokeGroup = listData;
    //         vm.$nextTick(function() {
    //             if(vm.myKarokeGroup.length === 0) {
    //                 vm.myNull = true;
    //             } else {
    //                 vm.myNull = false;
    //             }
    //         });
    //     };
    //     POST(url, params, callback);
    // }

    // 获取班级分享数据
    // function getClassShareGroup(ids) {
    //     var url = 'question/findClassesShareList';
    //     var params = {
    //         'clsClassesId': ids || vm.classId,
    //         'questionLibraryId': pageParam.id
    //     };
    //     var callback = function (data) {
    //         vm.classShareGroup = data.listData;
    //         vm.$nextTick(function() {
    //             if(vm.classShareGroup.length === 0) {
    //                 vm.shareNull = true;
    //             } else {
    //                 vm.shareNull = false;
    //             }
    //         });
    //     };
    //     POST(url, params, callback);
    // }

    // 确认删除后执行
    // function confirmDelate() {
    //     var item = vm.myKarokeGroup[delIndex];
    //     var url = 'question/deleteDubById';
    //     var params = {
    //         id: item.id
    //     };
    //     var callback = function (data) {
    //         fnToast('删除成功');
    //         getMyKarokeGroup();
    //         getClassShareGroup(vm.classId);
    //     };
    //     POST(url, params, callback);
    // }

    // 提交录音
    // function uploadRecordData(record) {
    //     var url = 'question/compareAnswer';
    //     var params = {
    //         id: pageParam.id,
    //         otherInfo: record,
    //         questionTypeCode: pageParam.code
    //     };
    //     var callback = function (data) {
    //         fnToast('提交成功');
    //         getMyKarokeGroup();
    //     };
    //     POST(url, params, callback);
    // }
</script>

</html>